<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/user_management.css" th:href="@{/back_css/user_management.css}" media="all">
</head>
<body>
<div class="container">
    <div class="container_top">
        <div>
            <input type="text" placeholder="请输入关键字" class="layui-input" name="id" id="demoReload" autocomplete="off">
            <button data-type="reload" class="layui-btns"><i class="layui-icon layui-icon-search search_btn"></i></button>
        </div>
        <div>

        </div>
    </div>
    <div class="container_content">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<div class="edit_id">
    <form class="layui-form" action="" method="get">
        <div>
            <span>编辑账号</span>
            <button id="close" type="button"><i class="layui-icon">&#x1006;</i></button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" name="title" lay-verify="required|newPwd" autocomplete="off" placeholder="请输入密码"
                       class="layui-input" id="password">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码：</label>
            <div class="layui-input-block">
                <input type="password" name="title" lay-verify="required|confirmPwd" autocomplete="off"
                       placeholder="请确认密码" class="layui-input" id="password2">
                <span id="password2_tips"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属地区：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="quiz3" lay-verify="required">
                        <option value="">请选择县/区</option>
                        <option value="渝中区">渝中区</option>
                        <option value="大足区">大足区</option>
                        <option value="大渡口">大渡口</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话：</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="phone|phonesub" maxlength="11" autocomplete="off"
                       placeholder="请输入电话号码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item_btn">
            <button type="button" class="layui-btn " id="cancel">取消</button>
            <button lay-submit class="layui-btn" id="sure" lay-filter="formDemo">确定</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;


        table_render('/getUser');



        function table_render(url) {
            table.render({
                elem: '#test'
                , width: 1080
                , even: true
                , page: true
                , url: url
                , limit: 20
                , limits: [20, 30]
                , id: 'idTest'
                , cols: [
                    [
                    {type: 'checkbox', fixed: 'left', style: 'display:none'},
                    {field: 'id', width: 70, title: '序号',hide: true}
                    , {field: 'nickname', width: 120, title: '昵称'}
                    , {
                        field: 'gender',
                        width: 100,
                        title: '性别',
                        templet: function (d) {
                            return d.gender == "1" ? "男" : "女";
                        }}
                    , {field: 'age', title: '年龄', width: 80}
                    , {field: 'country', width: 120, title: '国家'}
                    , {field: 'province', width: 120, title: '省'}
                    , {field: 'city', width: 120, title: '市'}
                    , {field: 'phone', title: '联系电话', width: 120}
                    , {field:'is_SUBSCRIBE', title: '是否订阅',width:100}
                    , {field:'ADD_TIME', title: '添加时间',width:198}
                ]
                ]
            });
        }

        // var $ = layui.$, active = {
        //     reload: function(){
        //         var demoReload = $('#demoReload');
        //
        //         //执行重载
        //         table.reload('testReload', {
        //             page: {
        //                 curr: 1 //重新从第 1 页开始
        //             }
        //             ,where: {
        //                 key: {
        //                     id: demoReload.val()
        //                 }
        //             }
        //         }, 'data');
        //     }
        // };
        //
        // $('.demoTable .layui-btn').on('click', function(){
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });


//这里以搜索为例
        $(".search_btn").on("click", function () {
            //if ($(".searchVal").val() != '') {
            table.reload("idTest", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    USER_NAME: $("#demoReload").val(),//搜索的关键字
                }
            })

            // } else {
            //     layer.msg("请输入搜索的内容");
            // }
            return false;
        });

        $('.layui-btns').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                $(".edit_id").css("display", "block");
                // layer.prompt({
                //     formType: 2
                //     , value: data.email
                // }, function (value, index) {
                //     obj.update({
                //         // email: value
                //     });
                //     layer.close(index);
                // });
            }
        });
        $("#password2").blur(function () {
            if ($("#password").val() == $("#password2").val()) {
                $(this).next().css("display", "none")
            } else {
                $(this).next().css("display", "inline-block");
                $(this).next().html("两次密码输入不一致，请重新输入")
            }
        })
        var phone = /^((\+86)|(86))?(1[3|4|5|6|7|8])\d{9}$/;
        form.verify({
            newPwd: function (value, item) {

                if (value.length < 6) {
                    return "密码长度不能小于6位";
                }

            },
            phonesub: function (value) {



                var flag = phone.test(value);
                if (!flag) {
                    return "请输入正确号码"
                }


            },
            confirmPwd :function (value) {


                if ($("#password").val() == $("#password2").val()) {
                    $(this).next().css("display", "none")
                } else {
                    $(this).next().css("display", "inline-block");
                    $(this).next().html("两次密码输入不一致，请重新输入")
                    return "两次密码输入不一致，请重新输入";
                }


            }

        });
        form.on('submit(formDemo)', function (data) {
            //console.log(data.field);
            if (data.field.password != data.field.password2) {
                // layer.msg("两次密码输入不一致！")
                return false;
            }
            $.post({
                url: "",
                async: false,
                data: data.field,
                success: function (res) {

                },
                error: function (res) {


                }


            })


            return false;
        });
        $(".layui-btn-warm").on("click", function () {
            $(".edit_id").css("display", "block");
        });
        $("#cancel").on("click", function () {
            $(".edit_id").css("display", "none");
        });
        $("#close").on("click", function () {
            $(".edit_id").css("display", "none");
        });
        // $("#sure").on("click",function () {
        //     $(".edit_id").css_bak("display","none");
        // });
    });
</script>
</body>
</html>